<template>
  <v-layout>
    <v-navigation-drawer v-model="visible" absolute temporary>
      <div class="m-user">
        <div class="m-user-info">
          <div class="m-user-avatar"></div>
          <p class="m-user-name">q8164305</p>
        </div>
        <div class="m-user-sign">
          <i class="material-icons">room</i>
          签到
        </div>
      </div>
      <ul class="m-slide-items" v-for="(item, index) in items" :key="index">
        <li v-if="item.type !== 'divide'" class="m-slide-item">
          <i class="material-icons">{{ item.icon }}</i>
          {{ item.title }}
        </li>
        <li v-if="item.type === 'divide'" class="m-slide-divide"></li>
      </ul>
    </v-navigation-drawer>
  </v-layout>
</template>

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";

interface Item {
  title?: string;
  icon?: string;
  to?: string;
  type?: string;
}
// declare module "vue/types/vue" {
//   interface Nav {
//     show: any;
//   }
// }

// declare module "slide.vue" {
//   import Vue from "vue";
//   export default Vue;
// }

@Component({
  // data() {
  //   return {
  //     drawer: false
  //   };
  // },
  // methods: {
  //   show() {
  //     this.drawer = true;
  //   }
  // }
})
export default class Slide extends Vue {
  visible: boolean = false;

  items: Array<Item> = [
    { title: "今日热议", to: "/", icon: "whatshot" },
    { title: "特别关注", to: "/", icon: "question_answer" },
    { title: "收藏", to: "/post", icon: "star_border" },
    { type: "divide" },
    { title: "发帖", to: "/post", icon: "create" },
    { title: "反馈", to: "/post", icon: "border_color" },
    { type: "divide" },
    { title: "设置", to: "/post", icon: "settings" },
    { title: "夜间模式", to: "/post", icon: "dashboard" }
  ];

  toggle(visible?: boolean) {
    if (visible) {
      this.visible = visible;
      return;
    }
    this.visible = !this.visible;
  }
}
</script>

<style lang="scss" scoped>
.m-user {
  padding: 16px 20px;
  background: $themeColor;
  display: flex;
  justify-content: space-between;
}
.m-user-info {
  // width: 50px;
}
.m-user-avatar {
  width: 80px;
  padding-top: 100%;
  border-radius: 50%;
  background: #fff;
}
.m-user-name {
  margin-top: 8px;
  text-align: center;
}
.m-user-sign {
  display: flex;
  justify-content: center;
  align-self: flex-end;
  padding: 4px 8px;
  border: 1px solid #000;
  border-radius: 16px;
  font-size: 14px;
  & .material-icons {
    padding-right: 8px;
    font-size: 20px;
  }
}

.m-slide-items {
}
.m-slide-item {
  display: flex;
  align-items: center;
  margin: 16px;
  font-size: 16px;
  & .material-icons {
    margin-right: 24px;
    // font-size: 16px;
  }
}
.m-slide-divide {
  border-top: 1px solid $themeColor;
}
</style>
